這章主要是來分享用susy2來設計responsive grid，
一開始會先介紹susy2的latouy設定後，
才會來講如何透過susy-breakpoint來寫responsive的斷點設定。
##youtube影片教學
##範例程式碼
susy2的layout有好幾種設定方式，
但不管是哪種設定方式，
他都是拿來覆蓋預設$susy的Sass maps用的，
在susy2的文件裡面，
當介紹完Global Defaults後，
接著就在講layout的部份，
當初我在看的時候就很納悶，
我就直接在預設的$susy修改不就好了，
幹嘛還要用layout來覆蓋？
後來我看了susy-breakpoint的Mixin才知道，
susy2可以藉由斷點的設定，
來去設計各種不同的Grid！
像是susy1、960Grid，
如果你gutter有設定值後，
那今天不管是怎麼調整你的grid，
gutter就仍還是會有間距，
但susy2則能夠夠在每個斷點加入Layout的設定，
這樣每個斷點就又能產生出新的Grid的規則出來！
首先我們就先把layout搞懂吧，
在之前的教學，
我都只有提到要自訂Grid的話，
你必須到susy的Global Defaults調整Sass Maps，
但透過Layout Mixin，你也可以用這樣縮寫來覆蓋掉$susy的設定。
// columns一定要放在gutters的前面
@include layout(12 1/4 fluid float inside);
//所以你也可以這樣子寫
@include layout(fluid float inside 12 1/4);
//如果你想要gutter是px的話，可以這樣子寫
@include layout(12 (60px,20px)) // 60px=欄寬 20px=gutter寬
//你也可以自訂Sass maps變數
$desktop: (
columns:12,
gutters: 1/3,
gutter-position: after
)
//或者
$desktop:(12 1/3 after);
//將$desktop導入到layout去
@include layout($desktop);
這些設定你可以直接放在外面覆蓋掉$susy的Sass maps，
或者你在寫RWD的時候，
將layout設定放進去。
這個Mixin的核心就如同官網所寫的，
他有使用了Breakpoint的framwework，
我們先來看他的範例：
@include susy-breakpoint(30em, 8) {
// 當螢幕解析度在30em以上時，欄數會變為8欄
.example { @include span(3); }
}
有些人文件沒看清楚，
就會以為那個8好像就只能單純寫數字提供欄數的變化，
但實際上他可以載入Sass Map進去的，
這樣你就能在某個斷點下，變化整個Grid的設定，
例如像這樣子：
$susy: (
columns:8,
math: fulid,
column-width:60px,
gutter-position: inside,
gutters:0,
debug:(image:true)
);
$desktop:(12 1/3 after); //用來做為 pc以上斷點要載入的Sass maps設定
.container{
height:500px;
@include container(); //吃到 $susy的sass maps設定
@include susy-breakpoint(1024px,$desktop){
//因為載入到$desktop的Grid，所以根據$desktop規則重新編譯container
@include container();
}
}
.at1{
@include span(2); //吃到 $susy的sass maps設定
@include susy-breakpoint(1024px,$desktop){
//這裡也必須再寫一次span是幾欄，因為上面的span2是吃到$susy的設定，編譯出來的值自然不會是$desktop的規則，觀念也就和.container就是。
@include span(2);
}
}
從上面的程式碼你就可以看得出來，
當我是手機版型時，我的Grid是沒有guuter，
是以8欄無縫方式設計的，
但當我是PC以上螢幕解析度時，
因為吃到$desktop的設定，
所以就變成有gutter，且欄數變為12的方式來設計。
從這裡你就可以看出，
susy2可以針對各個斷點來設定grid真的強大到不行，
版型的靈活性又更往上進階一層了，
下個章節我們再繼續講解如何優化susy-breakpoint的設定。